<template>
  <a-modal v-model="visible" width="80%">
    <span slot="title">
      <span>打印运单</span>
      <span style="margin-left: 20px"  v-if=" port!='client'"> 客户编号：{{ dto.tenantId }} </span>
    </span>
    <template slot="footer">
      <a-button
        style="background: #d7d7d7; color: #fff; border: none"
        @click="
          () => {
            this.visible = false;
          }
        "
        >取消</a-button
      >
      <a-button
        v-if="dto.applyState != '45' && dto.applyState != '15'"
        :loading="loading"
        type="primary"
        @click="onSumit"
        >保存</a-button
      >
    </template>

    <!-- 发件信息 -->
    <a-card style="margin-bottom: 15px" title="发件信息" :bordered="true">
      <a-row :gutter="24">
        <a-col :span="8">
          公司名称：{{
            dto.fromCompanyName === null ? "暂无" : dto.fromCompanyName
          }}
        </a-col>
        <a-col :span="8"
          >发件人姓名：{{
            dto.fromRecipient === null ? "暂无" : dto.fromRecipient
          }}
        </a-col>
        <a-col :span="8"
          >电话号码：{{
            dto.fromContactPhone === null ? "暂无" : dto.fromContactPhone
          }}</a-col
        >
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          国家：{{
            dto.fromCountryName === null ? "暂无" : dto.fromCountryName
          }}
        </a-col>
        <a-col :span="8"
          >州/市：{{
            dto.fromProvinceName === null ? "暂无" : dto.fromProvinceName
          }}
        </a-col>
        <a-col :span="8"
          >邮编：{{
            dto.fromPostalCode === null ? "暂无" : dto.fromPostalCode
          }}</a-col
        >
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          城市：{{ dto.fromCity === null ? "暂无" : dto.fromCity }}
        </a-col>
        <a-col :span="8"
          >详细地址：{{
            dto.fromFirstAddress === null ? "暂无" : dto.fromFirstAddress
          }}
        </a-col>
      </a-row>
    </a-card>
    <!-- 收件信息-->
    <a-card style="margin-bottom: 15px" title="收件信息" :bordered="true">
      <a-row :gutter="24">
        <a-col :span="8">
          公司名称：{{
            dto.toCompanyName === null ? "暂无" : dto.toCompanyName
          }}
        </a-col>
        <a-col :span="8"
          >收件人姓名：{{ dto.toRecipient === null ? "暂无" : dto.toRecipient }}
        </a-col>
        <a-col :span="8"
          >电话号码：{{
            dto.toContactPhone === null ? "暂无" : dto.toContactPhone
          }}</a-col
        >
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          国家：{{ dto.toCountryName === null ? "暂无" : dto.toCountryName }}
        </a-col>
        <a-col :span="8"
          >州/市：{{
            dto.toProvinceName === null ? "暂无" : dto.toProvinceName
          }}
        </a-col>
        <a-col :span="8"
          >邮编：{{
            dto.toPostalCode === null ? "暂无" : dto.toPostalCode
          }}</a-col
        >
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          城市：{{ dto.toCity === null ? "暂无" : dto.toCity }}
        </a-col>
        <a-col :span="8"
          >详细地址：{{
            dto.toFirstAddress === null ? "暂无" : dto.toFirstAddress
          }}
        </a-col>
      </a-row>
    </a-card>

    <!-- 包裹及物流信息设置-->
    <a-card style="margin-bottom: 15px" :bordered="true" class="logisticsCard">
      <span slot="title">包裹及物流信息</span>
      <a-table
        :columns="parcelColumns"
        :data-source="dto.parcelList"
        :pagination="false"
      >
        <span slot="lengthNumber" slot-scope="text, record">
          {{ record.lengthNumber }}*{{ record.widthNumber }}*{{
            record.heightNumber
          }}
        </span>
        <span slot="logisticsCost" slot-scope="text, record">
          {{ record.logisticsCost }}{{ record.currency }}
        </span>
        <span slot="totalCost" slot-scope="text, record">
          {{ record.totalCost }}{{ record.currency }}
        </span>
        <span slot="remark" slot-scope="text, record">
          {{ record.remark === null ? "暂无" : record.remark }}
        </span>
        <span slot="waybillTime" slot-scope="text, record">
          {{
            record.waybillTime ? record.waybillTime.replace("T", "  ") : "暂无"
          }}
        </span>
        <span slot="waybillNo" slot-scope="text, record">
          <span v-if="record.waybillNo.length >= 1">
            <div v-for="(item, i) in record.waybillNo" :key="i">
              <span>{{ item }}</span>
            </div>
          </span>
        </span>
        <span slot="action" slot-scope="text, record">
          <a-button
            v-if="record.waybillNo.length <= 0"
            :loading="record.consultLoading"
            style="margin: 10px 0"
            size="small"
            @click="consult(record)"
            type="primary"
            :disabled="record.id === rowId && logisticsArray.length>0"
          >
            询价
          </a-button>

          <a-button
            v-if="record.waybillNo.length >= 1"
            style="margin: 10px 0"
            size="small"
            type="primary"
            disabled
          >
            已询价
          </a-button>
          <a-divider type="vertical" />
          <a-button
            :disabled="record.waybillNo.length <= 0"
            style="margin: 10px 0"
            size="small"
            type="primary"
            @click="uplodWaybillNo(record)"
          >
            下载运单
          </a-button>

          <a-divider type="vertical" v-if="dto.applyState != '45'" />
          <a-button
            v-if="dto.applyState != '45'"
            :disabled="record.waybillNo.length <= 0 || dto.applyState=='15' "
            size="small"
            type="primary"
            @click="waybillRefund(record)"
            :loading="record.refundWaybillLoading"
          >
            取消并退款
          </a-button>
        </span>
      </a-table>
      <a-row :gutter="24" style="margin: 15px 0">
        <a-col :span="8">
          物流商： {{ dto.logisticsName === null ? "暂无" : dto.logisticsName }}
        </a-col>
        <a-col :span="8">
          预定义包裹： {{ dto.parcel === null ? "暂无" : dto.parcel }}
        </a-col>
        <a-col :span="8">
          <a-checkbox disabled v-model="dto.sign"> 签收服务 </a-checkbox>
        </a-col>
      </a-row>
    </a-card>
    <!-- 物流商询价-->
    <a-card style="margin-bottom: 15px" :bordered="true" class="logisticsCard">
      <span slot="title">物流服务商询价</span>
      <a-table
        :columns="logisticsColumns"
        :data-source="logisticsArray"
        :pagination="false"
         :scroll="{ y: 400 }"
      >
        <span slot="rate" slot-scope="text, record">
          {{ record.rate }}{{ record.currency }}
        </span>
        <span slot="action" slot-scope="text, record">
          <a-button
            :loading="record.createWaybillLoading"
            size="small"
            @click="createWaybill(record)"
            :disabled="rowId === record.id"
            type="primary"
          >
            生成运单
          </a-button>
        </span>
      </a-table>
    </a-card>
  </a-modal>
</template>

<script>
import {
  waybill_message,
  waybill_messageAddbBuy,
  waybill_state,
  waybill_refund,
  waybill_dowWay,
} from "@/apis/system/BuyWaybill/BuyWaybill";
import req from "@/utils/req";
export default {
  props: ["dto", "showModals", "getTableList",'port'],
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
      loading: false,
      visible: false,
      warehousingId: [],
      logisticsArray: [],
      rowId: "",
    };
  },
  methods: {
    //下载运单
    async uplodWaybillNo(record) {
      let res = await waybill_dowWay(record.id);
      req.exportPDF("运单文件", res);
      // console.log(res);
      // console.log(record);
    },
    //取消运单
    waybillRefund(record) {
      this.$set(record, "refundWaybillLoading", true);
      setTimeout(async () => {
        let { code } = await waybill_refund(record.id);
        if (code === "10000") {
          this.$set(record, "refundWaybillLoading", false);
          this.showModals(this.dto);
          this.getTableList();
        } else {
          // this.$message.error(message);
          this.$set(record, "refundWaybillLoading", false);
        }
      }, 1000);
    },
    //生成运单
    async createWaybill(record) {
      this.rowData = record;
      this.$set(record, "createWaybillLoading", true);
      let { code } = await waybill_messageAddbBuy(this.rowId, record);
      if (code === "10000") {
        this.$set(record, "createWaybillLoading", false);
        this.showModals(this.dto);
      } else {
        // this.$message.error(message);
        this.$set(record, "createWaybillLoading", false);
      }
    },
    //询价按钮
    async consult(record) {
      this.rowId = record.id;
      this.$set(record, "consultLoading", true);

      let { code, responseBody } = await waybill_message(record.id);
      if (code === "200") {
        this.logisticsArray = responseBody.rates;
        this.$set(record, "consultLoading", false);
      }
    },
    //打开模态框
    showModal() {
      this.visible = true;
      this.logisticsArray = [];
      this.rowId = "";
    },
    //提交模态框
    onSumit() {
      this.loading = true;
      this.passFlag = true;
      this.dto.parcelList.forEach((item) => {
        if (item.waybillNo.length <= 0) {
          this.passFlag = false;
        }
      });
      if (this.passFlag) {
        setTimeout(async () => {
          let { code } = await waybill_state(this.dto.id, "15");
          if (code === "10000") {
            this.getTableList();
            this.loading = false;
            this.visible = false;
          } else {
            this.visible = false;
          }
        }, 1000);
      } else {
        this.$message.error("请生成运单号后保存！！");
        this.loading = false;
        return false;
      }
    },
    // handleChangeWarehouse(value, option) {
    //   console.log(value, option);
    // },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
  computed: {
    parcelColumns() {
      return [
        {
          title: "物流商",
          dataIndex: "logisticsName",
          align: "center",
          scopedSlots: { customRender: "logisticsName" },
          width: "10%",

          //  fixed: "left",
        },
        {
          title: "长*宽*高(cm)",
          dataIndex: "lengthNumber",
          scopedSlots: { customRender: "lengthNumber" },
          align: "center",
          width: "12%",
        },
        {
          title: "重量(kg)",
          dataIndex: "weightNumber",
          align: "center",
          scopedSlots: { customRender: "weightNumber" },
          width: "8%",
        },
        {
          title: "运单号",
          dataIndex: "waybillNo",
          align: "center",
          width: "8%",
          scopedSlots: { customRender: "waybillNo" },
        },
        {
          title: "物流费用",
          dataIndex: "logisticsCost",
          scopedSlots: { customRender: "logisticsCost" },
          align: "center",
          width: "8%",
        },
        {
          title: "平台费",
          dataIndex: "a",
          scopedSlots: { customRender: "a" },
          align: "center",
          width: "8%",
        },
        {
          title: "总费用",
          dataIndex: "totalCost",
          scopedSlots: { customRender: "totalCost" },
          align: "center",
          width: "8%",
        },
        {
          title: "生成运单时间",
          dataIndex: "waybillTime",
          scopedSlots: { customRender: "waybillTime" },
          align: "center",
          width: "10%",
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
          align: "center",
          width: "20%",
        },
      ];
    },
    logisticsColumns() {
      return [
        {
          title: "物流商",
          dataIndex: "carrier",
          align: "center",
          scopedSlots: { customRender: "carrier" },
          width: "8%",

          //  fixed: "left",
        },
        {
          title: "物流方式",
          dataIndex: "service",
          scopedSlots: { customRender: "service" },
          align: "center",
          width: "9%",
        },
        {
          title: "价格",
          dataIndex: "rate",
          align: "center",
          width: "9%",
          scopedSlots: { customRender: "rate" },
        },
        {
          title: "平台费用",
          dataIndex: "s",
          scopedSlots: { customRender: "s" },
          align: "center",
          width: "9%",
        },
        {
          title: "保险费",
          dataIndex: "a",
          scopedSlots: { customRender: "a" },
          align: "center",
          width: "9%",
        },
        {
          title: "总费用",
          dataIndex: "f",
          scopedSlots: { customRender: "f" },
          align: "center",
          width: "9%",
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
          align: "center",
          width: "10%",
        },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.ant-modal-footer {
  text-align: center !important;
  button {
    margin: 0 50px;
  }
}
/deep/.ant-form-item {
  margin-bottom: 12px;
}
.logisticsCard {
  /deep/.ant-card-body {
    padding: 0;
  }
}
</style>